<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#container{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			canvas{
				width: 500px;
				height: 500px;
				border: 1px solid darkblue;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<canvas id="c1" width="500px" height="500px"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			let oCanvas =document.getElementById('c1');
			
			let oPen = oCanvas.getContext("2d");
			
			oPen.strokeStyle= "blue";
			oPen.lineWidth= "20";
			oPen.lineJoin="round";
			console.dir(oPen);
			
			
			oPen.moveTo(200,100);
			oPen.lineTo(200,245);
			oPen.moveTo(206,250);
			oPen.lineTo(156,200);
			oPen.moveTo(193,250);
			oPen.lineTo(243,200);
			
			
			oPen.moveTo(300,105);
			oPen.lineTo(300,250);
			oPen.moveTo(307,100);
			oPen.lineTo(257,150);
			oPen.moveTo(294,100);
			oPen.lineTo(344,150);
			
			
			oPen.stroke();
			
			
		}
	</script>
</html>